<template>
	<view class="container">
		<image @click="clickSearch" class="search-icon" :src="shaixuan"></image>
		<view class="game-tag-container" v-show="isShowSearch" @click="clickSerchContainer">
			<view class="game-tag-container__body" @click.stop="stopEvent">
				<text class="game-tag-container__body-title">核销时间</text>
				<view class="time-container">
					<view>开始时间:</view>
					<uni-datetime-picker v-model="query_filter.BeginTime" :hide-second="true" class="time-picker"></uni-datetime-picker>
				</view>
				<view class="time-container">
					<view>结束时间:</view>
					<uni-datetime-picker v-model="query_filter.EndTime" :hide-second="true" class="time-picker"></uni-datetime-picker>
				</view>
				<text class="game-tag-container__body-title">核销类型</text>
				<view class="game-tag-container__tag">
					<view
						v-for="(item, index) in tagList"
						:key="index"
						@click.stop="clickTagItem(index)"
						:class="clickTagIndex == index ? 'game-tag-container__item selected-game-tag' : 'game-tag-container__item'"
					>
						{{ item }}
					</view>
				</view>
				<text class="game-tag-container__body-title">核销方式</text>
				<view class="game-tag-container__tag">
					<view
						v-for="(item, index) in wayTagList"
						:key="index"
						@click.stop="clickWayTagItem(index)"
						:class="clickWayTagIndex == index ? 'game-tag-container__item selected-game-tag' : 'game-tag-container__item'"
					>
						{{ item }}
					</view>
				</view>
				<view class="game-tag-container__bottom">
					<view class="game-tag-container__bottom-reset-btn" @click.stop="resetSearch">重置</view>
					<view class="game-tag-container__bottom-confirm-btn" @click.stop="confirmSearch">确定</view>
				</view>
			</view>
		</view>
		<view v-if="resultList.length > 0" class="main-coupon-container">
			<view v-for="(item, index) in resultList" :key="index"><verification-info :detailInfo="item"></verification-info></view>
		</view>
		<view v-else class="sell-container ">
			<view class="empty"><text>抱歉！没有找到符合条件的优惠券</text></view>
		</view>
	</view>
</template>

<script>
import shaixuan from '@/static/images/shaixuan.png';
import { formatDate, errorToShow } from '@/config/common.js';
import { getCustomerOnStore, searchWechatStoreVerificationCoupon, getConcponTypeList, getCustomerCouponUsingWay } from '@/constant/customer.js';
import verificationInfo from './components/verificationInfo.vue';
export default {
	components: {
		verificationInfo
	},
	data() {
		return {
			shaixuan: shaixuan,
			isShowSearch: false,
			query_filter: {
				BeginTime: '',
				EndTime: '',
				StoreId: '',
				CouponType: '',
				CustomerCouponUsingWay: ''
			},
			clickTagIndex: -1,
			startDate: '请选择开始时间',
			endDate: '请选择结束时间',
			beforeTime: 13,
			resultList: [],
			tagList: [],
			conponTypeList: [],
			clickWayTagIndex: -1,
			wayTagList: [],
			wayConponTypeList: []
		};
	},
	onLoad() {
		this.getCustomerOnStore();
		this.getConponType();
		this.getCustomerCouponUsingWay();
		this.initQueryFilter();
	},
	methods: {
		initQueryFilter() {
			let beforeValue = this.beforeTime * 60 * 60 * 1000;
			this.query_filter.BeginTime = formatDate(new Date(new Date().getTime() - beforeValue), 'yyyy-MM-dd hh:mm');
			this.query_filter.EndTime = formatDate(new Date(), 'yyyy-MM-dd hh:mm');
			this.query_filter.CouponType = '';
			this.query_filter.CustomerCouponUsingWay = '';
			this.clickTagIndex = -1;
			this.clickWayTagIndex = -1;
		},
		clickSearch() {
			this.isShowSearch = true;
		},
		clickSerchContainer() {
			this.isShowSearch = false;
		},
		stopEvent() {
			return;
		},
		clickTagItem(val) {
			this.clickTagIndex = val;
			this.query_filter.CouponType = this.conponTypeList[val].Value;
		},
		clickWayTagItem(val) {
			this.clickWayTagIndex = val;
			this.query_filter.CustomerCouponUsingWay = this.wayConponTypeList[val].Value;
		},
		async getConponType() {
			let that = this;
			let result = await getConcponTypeList();
			this.conponTypeList = result;
			this.conponTypeList.forEach(function(item) {
				that.tagList.push(item.Description);
			});
		},
		async getCustomerCouponUsingWay() {
			let that = this;
			let result = await getCustomerCouponUsingWay();
			this.wayConponTypeList = result;
			this.wayConponTypeList.forEach(function(item) {
				that.wayTagList.push(item.Description);
			});
		},
		async getCustomerOnStore() {
			let result = await getCustomerOnStore({});
			this.query_filter.storeId = result;
			this.searchStoreVerificationCoupon();
		},
		resetSearch() {
			this.initQueryFilter();
		},
		confirmSearch() {
			this.query_filter.pageIndex = 0;
			this.resultList = [];
			this.searchStoreVerificationCoupon();
			this.clickSerchContainer();
		},
		async searchStoreVerificationCoupon() {
			if (!this.query_filter.BeginTime) {
				errorToShow('请选择开始时间');
				return;
			}
			if (!this.query_filter.EndTime) {
				errorToShow('请选择结束时间');
				return;
			}
			this.resultList = await searchWechatStoreVerificationCoupon(this.query_filter);
		}
	}
};
</script>
<style lang="scss" scoped>
.container {
	padding-bottom: 10rpx;
}

.search-icon {
	position: fixed;
	top: 26rpx;
	right: 46rpx;
	z-index: 1;
	width: 48rpx;
	height: 48rpx;
}

.game-tag-container {
	position: fixed;
	z-index: 999;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0, 0, 0, 0.4);

	&__body {
		background-color: #fff;
		width: 550rpx;
		height: 100vh;
		overflow-y: auto;
		position: absolute;
		right: 0;
		top: 0;
		font-size: 28rpx;
		animation: mymove 0.5s 1;

		&-title {
			padding: 20rpx;
			display: block;
			background-color: $main-page-color-gray;
			margin-bottom: 12rpx;
		}
	}

	&__tag {
		margin-top: 12rpx;
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 12rpx;
	}

	&__item {
		font-size: 26rpx;
		padding: 10rpx 20rpx 10rpx 20rpx;
		border: 2rpx solid #dd524d;
		color: #dd524d;
		background-color: #fff;
		margin-left: 20rpx;
		border-radius: 8rpx;
	}

	.selected-game-tag {
		background-color: #dd524d;
		color: #fff;
	}

	&__bottom {
		position: absolute;
		bottom: 20rpx;
		display: flex;
		z-index: 9999;
		font-size: 30rpx;
		width: 100%;
		justify-content: space-between;

		&-reset-btn {
			width: 150rpx;
			height: 70rpx;
			background-color: #dedede;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 8rpx;
			margin-left: 20rpx;
		}

		&-confirm-btn {
			width: 150rpx;
			height: 70rpx;
			background-color: $main-text-color-red;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			border-radius: 8rpx;
			margin-right: 20rpx;
		}
	}
}

@keyframes mymove {
	from {
		right: -200px;
	}

	to {
		right: 0;
	}
}

.picker {
	border: 2rpx solid $main-line-color-gray-DE;
	padding: 5rpx;
	font-size: 28rpx;
}
.time-container {
	display: flex;
	align-items: center;
	padding: 0 12rpx;
	justify-content: space-between;
	margin-bottom: 12rpx;
	.time-picker {
		width: 70%;
	}
}

.empty {
	height: 100vh;
	line-height: 320rpx;
	text-align: center;
	color: #b5b5b7;
	width: 100vw;
}

.main-coupon-container {
	padding: 0rpx 30rpx;
}
</style>
